<template>
  <view class="root">
    <acme-app-bar title="Skeleton"></acme-app-bar>
    
    <view class="ui-title">基础用法</view>
    <view class="card">
      <acme-skeleton/>
      <acme-skeleton/>
      <acme-skeleton/>
    </view>

    <view class="ui-title">自定义组合</view>
    <view class="card">
      <acme-skeleton avatar />
      <acme-skeleton/>
      <acme-skeleton/>
      <acme-skeleton/>
    </view>
    
    <view class="ui-title">模拟加载数据</view>
    <view class="product-list" v-if="loadSuccess">
      <view v-for="(item, index) in 10" :key="index">
        <view class="pic">
          <image src="/static/pic.png"></image>
        </view>
        <view class="text-wrap">
          <view class="top-wrap">
            <text>蕉下4层防护口罩防晒UPF50+防紫外线3d立体防细菌飞沫 独立装  空间立体口罩 S码</text>
          </view>
          <view class="bottom-wrap">
            <text class="price"><text>¥</text>59.00</text>
            <text class="comment">
              <text class="label">自营</text>
              5000+条评价 好评率96%
            </text>
            <text class="store">蕉下京东自营旗舰店</text>
          </view>
        </view>
      </view>
    </view>
    
    <view class="product-list" v-else>
      <view v-for="(item, index) in 10" :key="index">
        <view class="pic skeleton">
        </view>
        <view class="text-wrap">
          <view class="top-wrap skeleton" style="height: 40rpx;">
          </view>
          <view class="bottom-wrap">
            <text class="price skeleton" style="width: 50%; margin-top: 15rpx;"></text>
            <text class="comment skeleton" style="margin-top: 15rpx;"></text>
            <text class="store skeleton" style="margin-top: 15rpx; width: 80%;"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import AcmeSkeleton from "@/components/acme-design/skeleton/index.vue"
  
  export default {
    components: {
      AcmeSkeleton,
    },
    data() {
      return {
        loadSuccess: false
      };
    },
    onLoad() {
      this.getData()
    },
    methods: {
      getData() {
        setTimeout(() => {
          this.loadSuccess = true
        }, 3000)
      }
    }
  }
</script>


<style lang="scss" scoped>
  .root {
    min-height: 100vh;
    background: #fff;
    overflow: hidden;
    padding-bottom: 10px;

    .card {
      width: calc(100% - 20px);
      margin: auto;
      box-sizing: border-box;
    }
    
    .product-list {
      
      > view {
        display: flex;
        justify-content: space-between;
        padding: 0 20upx;
        box-sizing: border-box;
        margin-bottom: 25upx;
        
        .pic {
          width: 240upx;
          height: 240upx;
          border-radius: 10upx;
          overflow: hidden;
          
          image {
            width: 100%;
            height: 100%;
          }
        }
        
        .text-wrap {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-left: 20upx;
          
          .top-wrap {
            
            text {
              font-size: 28upx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
            }
          }
          
          .bottom-wrap {
            .label {
              color: #fff;
              font-size: 20upx;
              border-radius: 5upx;
              line-height: 1;
              display: inline-block;
              padding: 4upx 2upx;
              background-color: #E93B3D;
              display: none;
            }
            
            .price {
              display: block;
              margin-top: 40upx;
              color: red;
              font-size: 32upx;
              font-weight: 500;
              line-height: 1;
              
              text {
                font-size: 20upx;
              }
            }
            
            .comment {
              display: block;
              margin-top: 10upx;
              color: #999;
              font-size: 26upx;
              
              text {
                display: inline-block;
                padding: 4upx;
                background-color: red;
                color: #fff;
                font-size: 20upx;
                line-height: 1;
                border-radius: 4upx;
                margin-right: 10upx;
                position: relative;
                top: -4upx;
              }
            }
            
            .store {
              display: block;
              margin-top: 10upx;
              color: #999;
              font-size: 26upx;
            }
          }
        }
      }
    }
  }
</style>